Pin Input

Source

Theme Source

The PinInput component in Pearl UI is a specialized input component optimized for entering sequences of digits quickly. It supports various sizes, variants, color schemes, and additional features like automatic focus management and input type restrictions. By default, it renders a sequence of 4 input fields with a medium size and filled variant.

Import#

import { PinInput } from "pearl-ui";

Usage#

<PinInput onComplete={(pinValue) => console.log(pinValue)} />

Pin Input Sizes#

Use the size prop to change the size of the pin input fields. You can set the value to the keys available in PearlTheme.components.PinInput["sizes"], which are "xs", "s", "m", and "l" in the default component configuration.

<PinInput size="xs" />
<PinInput size="s" />
<PinInput size="m" />
<PinInput size="l"/>

Pin Input Variants#

The variant prop allows you to change the visual style of the pin input fields. The available variants are "filled" and "outline" as defined in the default component configuration.

<PinInput variant="filled" />
<PinInput variant="outline" />

Pin Input Color Schemes#

The colorScheme prop allows you to change the color palette of the pin input fields. The available color schemes are "primary", "secondary", "neutral", etc as defined in the default Pearl theme.

<PinInput colorScheme="primary" />
<PinInput colorScheme="secondary" />

Auto Focus Management#

The manageFocus prop allows you to enable or disable automatic focus management. When enabled, focus will move automatically to the next input once the current input is filled.

<PinInput manageFocus placeholder="Pin input with auto focus management" />

Changing Input Types#

The type prop allows you to restrict the type of values the pin-input should allow. The available types are "number" and "alphanumeric".

<PinInput type="number" />
<PinInput type="alphanumeric" />

Changing Number of Input Fields#

The numFields prop allows you to specify the number of input fields in the pin input. By default, there are 4 input fields.

<PinInput numFields={6} />

Masking Input Values#

The secureTextEntry prop allows you to mask the input fields, useful for password-based pin inputs. When enabled, the input fields will display dots instead of the actual characters.

<PinInput secureTextEntry />

Overriding Styles#

The PinInput component supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedence than the default component configuration.

// The marginTop prop adds a top margin to the pin input field// The backgroundColor prop overrides the default component config value of backgroundColor="neutral.200"<PinInput variant="filled" marginTop="3" backgroundColor="green" />

Example#

Embed not loading? Click here

Accessibility#

PinInput has the role of text field.
When PinInput is disabled, it is reflected as disabled in screen readers.
PinInput has the default accessibility label set as the placeholder value passed into it. A custom label can be specified using the accessibilityLabel prop.

Component Properties#

Supported Style Properties#

The PinInput component is a composition of the Input component, which means all Input props can be passed to it.

Additional Properties#

Name	Required	Type	Default	Description
`numFields`	No	number	`4`	Determines the number of input fields in the pin input.
`manageFocus`	No	boolean	`true`	If set to `true`, focus will move automatically to the next input once filled.
`type`	No	"alphanumeric" \| "number"	`"number"`	The type of values the pin-input should allow.
`onComplete`	No	(value: string) => void		Function called when all inputs have valid values.